﻿<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交媒体平台</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-brand">社交平台</div>
        <div class="nav-menu">
            <a href="#" class="nav-item">首页</a>
            <a href="#" class="nav-item">消息</a>
            <div class="notification-wrapper">
                <a href="#" class="nav-item" id="notification-toggle">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">0</span>
                </a>
                <div class="notification-dropdown hidden">
                    <div class="notification-header">
                        <h3>通知</h3>
                        <button class="mark-all-read">全部已读</button>
                    </div>
                    <div class="notification-list">
                        <!-- 通知内容将动态加载 -->
                    </div>
                </div>
            </div>
            <a href="#" class="nav-item">个人中心</a>
        </div>
    </nav>

    <main class="container">
        <div class="sidebar">
            <div class="profile-card">
                <img src="avatar.jpg" alt="头像" class="avatar">
                <h3>用户名</h3>
                <p>个人简介</p>
            </div>
        </div>

        <div class="content">
            <div class="post-form">
                <textarea placeholder="分享新动态..."></textarea>
                <div class="post-form-actions">
                    <div class="upload-wrapper">
                        <input type="file" id="image-upload" accept="image/*" multiple class="file-input">
                        <label for="image-upload" class="upload-btn">
                            <i class="fas fa-image"></i> 添加图片
                        </label>
                    </div>
                    <button class="post-btn">发布</button>
                </div>
                <div class="image-preview"></div>
            </div>

            <div class="posts">
                <article class="post">
                    <div class="post-header">
                        <img src="avatar.jpg" alt="用户头像" class="post-avatar">
                        <div class="post-info">
                            <h4>用户名</h4>
                            <span class="post-time">2小时前</span>
                        </div>
                    </div>
                    <div class="post-content">
                        这是一条示例动态内容
                    </div>
                    <div class="post-images">
                        <img src="example1.jpg" alt="发布图片">
                    </div>
                    <div class="post-actions">
                        <button class="action-btn"><i class="fas fa-heart"></i> 点赞</button>
                        <button class="action-btn comment-toggle"><i class="fas fa-comment"></i> 评论</button>
                        <button class="action-btn"><i class="fas fa-share"></i> 分享</button>
                    </div>
                    <div class="comments-section hidden">
                        <div class="comment-form">
                            <input type="text" placeholder="发表评论..." class="comment-input">
                            <button class="comment-submit">发送</button>
                        </div>
                        <div class="comments-list">
                            <div class="comment">
                                <img src="avatar.jpg" alt="评论者头像" class="comment-avatar">
                                <div class="comment-content">
                                    <div class="comment-header">
                                        <span class="comment-author">评论用户</span>
                                        <span class="comment-time">1小时前</span>
                                    </div>
                                    <p class="comment-text">这是一条示例评论</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </main>
    <script src="script.js"></script>
    <script src="notifications.js"></script>
    <div class="loading-spinner hidden">
        <div class="spinner"></div>
    </div>
</body>
</html> 